<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAGflow AI助手测试页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 900px;
            width: 100%;
            padding: 40px;
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 32px;
        }

        .subtitle {
            color: #7f8c8d;
            margin-bottom: 30px;
            font-size: 16px;
        }

        .status-card {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .status-title {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .status-title i {
            font-size: 24px;
            color: #667eea;
        }

        .config-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
        }

        .config-item {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .config-label {
            font-size: 12px;
            color: #7f8c8d;
            font-weight: 500;
        }

        .config-value {
            font-family: 'Courier New', monospace;
            background: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 13px;
            color: #2c3e50;
            word-break: break-all;
        }

        .test-section {
            margin-bottom: 30px;
        }

        .test-buttons {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .test-btn {
            flex: 1;
            min-width: 200px;
            padding: 15px 25px;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .test-btn i {
            font-size: 18px;
        }

        .test-btn.primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .test-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }

        .test-btn.secondary {
            background: #ecf0f1;
            color: #2c3e50;
        }

        .test-btn.secondary:hover {
            background: #dfe6e9;
        }

        .test-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .preview-container {
            margin-top: 30px;
            border: 2px dashed #dfe6e9;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .preview-placeholder {
            color: #95a5a6;
            font-size: 16px;
        }

        .preview-iframe {
            width: 100%;
            height: 600px;
            border: none;
            border-radius: 8px;
        }

        .result-box {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 300px;
            overflow-y: auto;
        }

        .result-box.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .result-box.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .result-box.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }

        .checklist {
            list-style: none;
            margin-top: 15px;
        }

        .checklist li {
            padding: 8px 0;
            border-bottom: 1px solid #ecf0f1;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .checklist li:last-child {
            border-bottom: none;
        }

        .check-icon {
            color: #2ecc71;
            font-size: 18px;
        }

        .cross-icon {
            color: #e74c3c;
            font-size: 18px;
        }

        .footer {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 2px solid #ecf0f1;
            text-align: center;
            color: #7f8c8d;
            font-size: 14px;
        }

        .spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🤖 RAGflow AI助手测试工具</h1>
        <p class="subtitle">测试RAGflow AI助手组件的连接和功能</p>

        <!-- 配置信息 -->
        <div class="status-card">
            <div class="status-title">
                <i class="bi bi-gear"></i>
                当前配置
            </div>
            <div class="config-grid">
                <div class="config-item">
                    <div class="config-label">服务地址</div>
                    <div class="config-value" id="displayBaseUrl">http://localhost</div>
                </div>
                <div class="config-item">
                    <div class="config-label">Shared ID</div>
                    <div class="config-value" id="displaySharedId">ec1da38caef211f088ef72ae004f33d4</div>
                </div>
                <div class="config-item">
                    <div class="config-label">Auth Token</div>
                    <div class="config-value" id="displayAuthToken">Y3NjMyMmJhYjNmOTExZjBiMGY2MzJhNz</div>
                </div>
                <div class="config-item">
                    <div class="config-label">语言</div>
                    <div class="config-value">zh (中文)</div>
                </div>
            </div>
        </div>

        <!-- 测试按钮 -->
        <div class="test-section">
            <div class="test-buttons">
                <button class="test-btn primary" onclick="testConnection()">
                    <i class="bi bi-wifi"></i>
                    <span id="testBtn1Text">测试连接</span>
                </button>
                <button class="test-btn primary" onclick="openChatWindow()">
                    <i class="bi bi-chat-dots"></i>
                    <span>打开聊天窗口</span>
                </button>
                <button class="test-btn secondary" onclick="testDirectURL()">
                    <i class="bi bi-box-arrow-up-right"></i>
                    <span>浏览器直接访问</span>
                </button>
                <button class="test-btn secondary" onclick="clearResults()">
                    <i class="bi bi-trash"></i>
                    <span>清空结果</span>
                </button>
            </div>
        </div>

        <!-- 测试结果 -->
        <div id="resultsContainer"></div>

        <!-- 预览区域 -->
        <div class="preview-container" id="previewContainer">
            <div class="preview-placeholder">
                👆 点击"打开聊天窗口"查看RAGflow聊天界面
            </div>
        </div>

        <!-- 检查清单 -->
        <div class="status-card">
            <div class="status-title">
                <i class="bi bi-check2-square"></i>
                连接检查清单
            </div>
            <ul class="checklist" id="checklist">
                <li>
                    <i class="bi bi-circle"></i>
                    <span>点击"测试连接"开始检查</span>
                </li>
            </ul>
        </div>

        <!-- 页脚 -->
        <div class="footer">
            <p>💡 提示：确保RAGflow服务正在运行，并且端口配置正确</p>
            <p style="margin-top: 10px;">📚 查看 <strong>RAGflow_AI助手使用说明.md</strong> 获取详细帮助</p>
        </div>
    </div>

    <script>
        const BASE_URL = 'http://localhost';
        const SHARED_ID = 'ec1da38caef211f088ef72ae004f33d4';
        const AUTH_TOKEN = 'Y3NjMyMmJhYjNmOTExZjBiMGY2MzJhNz';
        const LOCALE = 'zh';

        function getChatURL() {
            return `${BASE_URL}/next-chats/share?shared_id=${SHARED_ID}&from=chat&auth=${AUTH_TOKEN}&locale=${LOCALE}`;
        }

        async function testConnection() {
            const btn = document.querySelector('#testBtn1Text');
            const originalText = btn.textContent;
            btn.innerHTML = '<span class="spinner"></span> 测试中...';
            
            const checklist = document.getElementById('checklist');
            checklist.innerHTML = '';
            
            addCheckItem('正在测试连接...', 'progress');
            
            try {
                // 测试1: 检查基础URL
                addCheckItem(`测试服务地址: ${BASE_URL}`, 'progress');
                try {
                    const response = await fetch(BASE_URL, { mode: 'no-cors' });
                    addCheckItem(`✓ 基础服务可达`, 'success');
                } catch (error) {
                    addCheckItem(`✗ 基础服务不可达: ${error.message}`, 'error');
                    addResult('error', `连接失败：\n${error.message}\n\n请检查:\n1. RAGflow服务是否启动\n2. 端口号是否正确\n3. 防火墙设置`);
                    btn.textContent = originalText;
                    return;
                }
                
                // 测试2: 检查完整URL
                const fullURL = getChatURL();
                addCheckItem(`测试完整URL`, 'progress');
                try {
                    const iframe = document.createElement('iframe');
                    iframe.style.display = 'none';
                    iframe.src = fullURL;
                    document.body.appendChild(iframe);
                    
                    await new Promise((resolve, reject) => {
                        iframe.onload = () => {
                            addCheckItem(`✓ iframe加载成功`, 'success');
                            resolve();
                        };
                        iframe.onerror = () => {
                            reject(new Error('iframe加载失败'));
                        };
                        setTimeout(() => reject(new Error('加载超时')), 8000);
                    });
                    
                    document.body.removeChild(iframe);
                    addCheckItem(`✓ 所有测试通过`, 'success');
                    addResult('success', `✅ 连接成功！\n\nRAGflow服务正常运行\n您可以点击"打开聊天窗口"开始使用`);
                    
                } catch (error) {
                    addCheckItem(`✗ URL测试失败: ${error.message}`, 'error');
                    addResult('error', `部分测试失败：\n${error.message}\n\n可能的原因:\n1. CORS跨域问题\n2. 认证信息错误\n3. URL路径错误`);
                }
                
            } catch (error) {
                addCheckItem(`✗ 测试失败: ${error.message}`, 'error');
                addResult('error', `测试失败：\n${error.message}`);
            }
            
            btn.textContent = originalText;
        }

        function openChatWindow() {
            const container = document.getElementById('previewContainer');
            const url = getChatURL();
            
            container.innerHTML = `
                <iframe 
                    src="${url}" 
                    class="preview-iframe"
                    frameborder="0"
                    allow="microphone; camera"
                ></iframe>
            `;
            
            addResult('info', `已加载聊天窗口\n\nURL: ${url}\n\n如果窗口空白或显示错误，请检查RAGflow服务配置`);
        }

        function testDirectURL() {
            const url = getChatURL();
            window.open(url, '_blank');
            addResult('info', `已在新标签页打开RAGflow\n\nURL: ${url}\n\n如果页面正常显示，说明服务配置正确`);
        }

        function clearResults() {
            document.getElementById('resultsContainer').innerHTML = '';
            document.getElementById('previewContainer').innerHTML = `
                <div class="preview-placeholder">
                    👆 点击"打开聊天窗口"查看RAGflow聊天界面
                </div>
            `;
            document.getElementById('checklist').innerHTML = `
                <li>
                    <i class="bi bi-circle"></i>
                    <span>点击"测试连接"开始检查</span>
                </li>
            `;
        }

        function addResult(type, message) {
            const container = document.getElementById('resultsContainer');
            const resultBox = document.createElement('div');
            resultBox.className = `result-box ${type}`;
            resultBox.textContent = message;
            container.appendChild(resultBox);
        }

        function addCheckItem(text, status) {
            const checklist = document.getElementById('checklist');
            const li = document.createElement('li');
            
            let icon = '<i class="bi bi-circle"></i>';
            if (status === 'success') icon = '<i class="bi bi-check-circle check-icon"></i>';
            if (status === 'error') icon = '<i class="bi bi-x-circle cross-icon"></i>';
            if (status === 'progress') icon = '<i class="bi bi-arrow-right" style="color: #3498db;"></i>';
            
            li.innerHTML = `${icon} <span>${text}</span>`;
            checklist.appendChild(li);
        }

        // 页面加载时显示配置信息
        window.onload = () => {
            console.log('RAGflow测试工具已加载');
            console.log('配置信息:', {
                baseUrl: BASE_URL,
                sharedId: SHARED_ID,
                authToken: AUTH_TOKEN,
                locale: LOCALE,
                fullUrl: getChatURL()
            });
            
            addResult('info', `测试工具已就绪\n\n当前配置:\n- 服务地址: ${BASE_URL}\n- Shared ID: ${SHARED_ID}\n- Auth Token: ${AUTH_TOKEN}\n- 语言: ${LOCALE}\n\n建议步骤:\n1. 点击"测试连接"\n2. 如果测试通过，点击"打开聊天窗口"\n3. 如果失败，查看错误信息并修复`);
        };
    </script>
</body>
</html>

